<template>
  <div class="container">
    <div class="title-wrapper">
      <div class="title">东莞市中心城区“一心两轴三片区”建设现场指挥部</div>
      <div class="title">专家及设计资源库</div>
    </div>
    <div class="tips" v-show="success">
      <div class="success-logo"><i class="el-icon-success"></i></div>
      <div class="success-content" v-if="'oldEmail' === type"><span class="color">旧邮箱</span> 已通过修改验证，请前往 <span class="color">新邮箱</span> 进行验证！ </div>
      <div class="success-content" v-if="'newEmail' === type"><span class="color">新邮箱</span> 已通过验证！修改成功！ </div>
    </div>
    <!-- 'queryReset' === type" -->
    <el-form class="reset-form" v-if="'queryReset' === type">
      <!-- 邮箱/手机号 -->
      <el-form-item label="邮箱/手机号" label-width="120px">
        <el-col span="24">
          <el-input v-model="uniqueness" autocomplete="off" maxlength="4" name="verifyCode" placeholder="请输入你的邮箱或者手机号"/>
        </el-col>
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item label="验证码" label-width="120px">
        <el-col span="12">
          <el-input v-model="verifyCode" autocomplete="off" maxlength="4" name="verifyCode"
                    placeholder="请输入验证码" @keyup.enter="submit"/>
          <span style="float: right; color: #666666; cursor: pointer;"
                @click="changeVerifyCode">点击图片刷新验证码</span>
        </el-col>
        <el-col span="12">
          <img ref="verifyCodeImg" @click="changeVerifyCode" src="api/generateVerifyCode" class="verifyCodeImg">
        </el-col>
      </el-form-item>
      <el-button type="myBlue" style="width: 600px;" :loading="loading" @click="submit">重置密码</el-button>
    </el-form>
    <!-- 'reset' === type -->
    <el-form class="reset-form" v-if="'reset' === type">
      <!-- 新密码 -->
      <el-form-item class="el-form-item" label="新密码" label-width="100px">
        <el-col span="24">
          <el-input v-model="newPassword1" type="password" autocomplete="off"/>
        </el-col>
      </el-form-item>
      <!-- 确认新密码 -->
      <el-form-item class="el-form-item" label="确认新密码" label-width="100px">
        <el-col span="24">
          <el-input v-model="newPassword2" type="password" autocomplete="off" @keyup.enter="changePassword"/>
        </el-col>
      </el-form-item>
      <el-button type="myBlue" style="width: 600px;" :loading="loading" @click="changePassword">修改密码</el-button>
    </el-form>

    <el-button type="myBlue"
               v-if="'oldEmail' === type"
               style="margin-top: 20px;width: 600px;"
               :loading="loading"
               @click="$router.push('/Home')">
      返回主页
    </el-button>

  </div>
</template>

<script>
export default {
  name: "Activate",
  data() {
    return {
      success: false,
      type: this.$route.query.type,
      loading: false,
      userId: this.$route.query.userId,
      token: this.$route.query.token,
      data: this.$route.query.data,
      uniqueness: "",
      verifyCode: "",
      newPassword1: "",
      newPassword2: "",
    };
  },
  methods: {
    changePassword() {
      this.loading = true
      if (this.newPassword1 !== this.newPassword2) {
        this.$notify({
          title: "修改密码失败",
          message: "两次的密码不一致！",
          type: "error",
          offset: 200,
        })
        this.loading = false
      } else {
        const payload = {
          userId: this.userId,
          token: this.token,
          password: this.newPassword1,
        };
        this.$http.post("api/user/resetPassword", payload).then(res => {
          if (200 === res.data.code) {
            this.$notify({
              title: "修改密码成功",
              type: "success",
              offset: 200,
            })
            this.$router.push("/Home")
            this.loading = false
          }
        });
      }
    },
    submit() {
      this.loading = true
      this.$http.post("api/user/forgetPassword", {
        uniqueness: this.uniqueness,
        verifyCode: this.verifyCode,
      }).then(res => {
        if (200 === res.data.code) {
          this.$notify({
            title: "提交修改密码请求",
            message: "请前往邮箱进行验证！",
            type: "success",
            offset: 200,
            duration: 0,
          })
        } else {
          this.changeVerifyCode()
        }
        this.loading = false
      })
    },
    changeVerifyCode() {
      this.verifyCode = ""
      this.$refs.verifyCodeImg.src = "api/generateVerifyCode?t=" + Date.now()
    },
  },
  created() {
    this.$store.commit("doLogout")
    if ("oldEmail" === this.type) {
      this.$http
          .get("api/user/confirmOldEmail", {
            params: {
              userId: this.userId,
              token: this.token,
              data: this.data,
            },
          })
          .then(res => {
            console.log(res.data.code, res.data.msg),
            200 === res.data.code && (this.success = !0);
          })

    } else if ("newEmail" === this.type) {
      this.$http
          .get("api/user/confirmNewEmail", {
            params: {
              userId: this.userId,
              token: this.token,
              data: this.data,
            },
          })
          .then(res => {
            console.log(res.data.code, res.data.msg)
            200 === res.data.code && (this.success = !0);
          });
    }
  },
}
</script>

<style scoped>
.container {
  text-align: center;
}

.container .title-wrapper {
  background-color: #2b6695;
  height: 200px;
  padding-top: 40px;
}

.container .title {
  padding-top: 20px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}

.tips {
  margin: 100px 0;
  display: flex;
  justify-content: center;
}

.tips .success-logo {
  color: green;
  font-size: 170px;
  /*background-color: #9599E2;*/
  width: 200px;
  height: 200px;
}

.tips .success-content {
  /*background-color: pink;*/
  display: inline-block;
  /*width: 660px;*/
  height: 230px;
  font-size: 40px;
  font-weight: 700;
  line-height: 230px;
}

.color {
  color: #0073BE;
  /*padding: 0 20px;*/
  font-size: 50px;
}

.reset-form {
  width: 600px;
  margin: 100px auto 10px auto;
  text-align: center;
}

.verifyCodeImg {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 20px;
  float: right;
}


/*按钮*/
.link {
  /*background-color: pink;*/
  width: 200px;
  display: inline-block;
  margin: 0 auto;
}

.button {
  display: block;
  color: #0073BE;
  background-color: white;
  line-height: 40px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 6px 6px 6px 9px;
  border: 2px solid #0073BE;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.button:hover {
  background-color: #0073BE;
  color: white;
}

/*.button:active {
  font-size: 14px;
  width: 180px;
  line-height: 36px;
}*/
</style>